<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				background-color: lightgreen;
				height: 6.25rem;
			}
			.container{
				display: flex;
				height: 31.25rem;
			}
			.left{
				flex: 1;
				background-color: lightcyan;
			}
			.main{
				flex: 3;
				background-color: lightcoral;
			}
			.right{
				flex: 1;
				background-color: lightseagreen;
			}
		</style>

	</head>
	<body>
		<div id="app">
			<router-view class="header"></router-view>
			<div class="container">
				<router-view name="left" class="left"></router-view>
				<router-view name="main" class="main"></router-view>
				<router-view name="right" class="right"></router-view>
			</div>

		</div>
		<script>
			var right = {
				template: '<h1>right右部区域布局</h1>'
			}
			
			var header = {
				template: '<h1>header头部区域布局</h1>'
			}
			var leftbox = {
				template: '<h1>left左部区域布局</h1>'
			}
			var mainbox = {
				template: '<h1>main主体区域布局</h1>'
			}

			var router = new VueRouter({
				routes: [{
						path: '/',
						components: {
							default: header,
							left: leftbox,
							main: mainbox,
							right,
						}
					}

				],
			})
			new Vue({
				el: '#app',
				router,
			})
		</script>
	</body>
</html>
